import React from 'react';

import ImageItem from './ImageItem';

import './styles/setting.less';

interface BackgroundProps {
	imageList: Array<IBackgroundList>;
	onSelect: Function;
	selectedID: number;
	deleteBackground: (id: number) => void
}

export interface IBackgroundList {
	type: string; // 'none', // none | blur | custom | image
	id: number;
	url: string;
	abbreviatedUrl: string;
	api?: string;
	apiClear?: string;
	fileName?: string;
	isDefault: boolean;
}



const Background = (props: BackgroundProps) => {
	const { imageList, onSelect, selectedID, deleteBackground } = props;

	return (
		<div className="background-box">
			<div className="image-wrapper">
				{imageList.map((item: any, index: number) => {
					return <ImageItem deleteBackground={deleteBackground} key={index} id={item.id} abbreviatedUrl={item.abbreviatedUrl} url={item.url} type={item.type} isDefault={item.isDefault} isSelect={item.id === selectedID} watermark={false} onSelect={onSelect} />;
				})}
			</div>
		</div>
	);
};

export default Background;
